import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
// import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './index.css'
//导入路由配置信息
import Routes from './RouterConfig';
//导入Common组件
import Common from './Common';
class index extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Route children={(props) => {
                        let { location } = props;
                        return (
                            // <TransitionGroup>
                            // <CSSTransition classNames={history.action === 'POP' ? "POP" : "PUSH"} key={location.pathname} timeout={0}>
                            <Switch location={location}>
                                {Routes.map((route, index) => {
                                    return this.createChildrenRoute(route, index)
                                })}
                            </Switch>
                            // </CSSTransition>
                            // </TransitionGroup>
                        )
                    }}>

                    </Route>
                </BrowserRouter>
            </div>
        );
    }
    //定义函数完成普通路由的构建
    createBaseRoute(route, index) {
        return <Route exact path={route.path} render={(props) => {
            return <Common meta={route.meta} {...props}>
                <route.component {...props}></route.component>
            </Common>
        }} key={index}></Route>
    }
    //定义函数 完成子路由的构建
    createChildrenRoute(route, index) {
        //获取当前路由的相关信息
        let { path, component: Father, children } = route
        if (children) {
            return <Route key={index} path={path} children={() => {
                return (
                    <Father>
                        <Switch>
                            {
                                children.map((route2, index2) => {
                                    return this.createChildrenRoute({ ...route2, path: path + '/' + route2.path }, `${index}-${index2}`)
                                })
                            }
                            <Redirect from={path} to={path + '/' + children[0].path}></Redirect>
                        </Switch>
                    </Father>
                )
            }} />
        } else {
            //生成普通路由实例
            return this.createBaseRoute(route, index)
        }
    }
}

export default index;